<template>
    <el-tabs v-model="activeName" >
        <el-tab-pane label="本地上传" name="first">
            <upload-image @upload-success="uploadSuccess" @remove-file="removeFile" :isUploadToTemp="false"></upload-image>
        </el-tab-pane>
        <el-tab-pane label="在线管理" name="second" >
            <el-row :gutter="16">
                <el-col :lg="6" :md="4" :xs="3" v-for="image in imageList" :key="image.id" v-height-eq-width="activeName" class="image-item-p">
                    <div style="position: relative;overflow: hidden" @click="handleSelectImage(image)">
                        <img class="image-item" :src="`${image.fullPath}?x-oss-process=image/resize,m_fill,h_200,w_200`" alt="">
                        <div class="on-select" v-if="selectImage.id === image.id"><i class="el-icon-check"></i></div>
                    </div>
                </el-col>
            </el-row>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="current_page"
                    :page-size="pageLimit"
                    layout="total, prev, pager, next, jumper"
                    :total="imageTotal">
            </el-pagination>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
    import UploadImage from '../UploadImage'
    import commonApi from '../../api/common'
    export default {
      components: {
        UploadImage
      },
      data () {
        return {
          activeName: 'first',
          selectImage: {
            id: 0,
            fullPath: ''
          },
          uploadImage: {
            id: 0,
            fullPath: ''
          },
          imageList: [
          ],
          pageLimit: 12,
          current_page: 1,
          imageTotal: 0
        }
      },
      created () {
        this.getImageList()
      },
      methods: {
        uploadSuccess (obj) {
          this.uploadImage = obj.data
          this.$emit('on-upload-image', this.uploadImage)
        },
        handleSelectImage (image) {
          if (this.selectImage.id === image.id) {
            this.selectImage = {
              id: 0,
              fullPath: ''
            }
          } else {
            this.selectImage = image
          }
          this.$emit('on-select-image', this.selectImage)
        },
        removeFile (obj) {
          if (obj.data.id === this.uploadImage.id) {
            this.uploadImage = {
              id: 0,
              fullPath: ''
            }
            this.$emit('on-upload-image', this.uploadImage)
          }
        },
        handleCurrentChange (currentPage) {
          this.current_page = currentPage
          this.getImageList()
        },
        getImageList () {
          const self = this
          commonApi.getFileList({type: 'image', page: this.current_page, limit: this.pageLimit}).then(response => {
            self.imageList = response.data.data
            self.imageTotal = response.data.meta.pagination.total
          }, response => {
            self.$message.error('图片加载失败')
          })
        }
      }
    }
</script>
<style scoped>
    .image-item{
        width: 100%;
    }
    .image-item-p{
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
    }
    .on-select{
        position: absolute;
        right: -17px;
        top: -7px;
        width: 46px;
        height: 26px;
        text-align: center;
        transform: rotate(45deg);
        box-shadow: rgb(204, 204, 204) 0px 1px 1px;
        background: rgb(19, 206, 102);
    }
    .on-select i{
        font-size: 12px;
        margin-top: 12px;
        transform: rotate(-45deg) scale(0.8);
        color: rgb(255, 255, 255);
    }
</style>